<template>
  <div class="spare_ratio">
    <el-dialog
      title="设置备份量系数"
      width="600px"
      v-dialogDrag
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="table_container">
        <el-table
          border
          :data="spareRatioListData"
          tooltip-effect="dark"
          class="table_dialog">
          <el-table-column
            :class-name="'static_col'"
            prop="sort"
            label="工序序号"
            show-overflow-tooltip
            min-width="80px"
            align="center">
          </el-table-column>
          <el-table-column
            :class-name="'static_col'"
            prop="workstageName"
            label="工序名称"
            show-overflow-tooltip
            min-width="80px">
          </el-table-column>
          <el-table-column
            :class-name="'static_col'"
            prop="materialNumber"
            label="物料编码"
            show-overflow-tooltip
            min-width="80px"
            align="center">
          </el-table-column>
          <el-table-column
            :class-name="'static_col'"
            prop="materialName"
            label="物料名称"
            show-overflow-tooltip
            min-width="80px"
            align="left">
          </el-table-column>
          <el-table-column
            :class-name="'static_col'"
            prop="quantity"
            label="数量"
            show-overflow-tooltip
            min-width="80px"
            align="center">
          </el-table-column>
          <el-table-column
            prop="spareRatio"
            label="备份量系数"
            show-overflow-tooltip
            :resizable="false"
            min-width="80px"
            align="input">
            <template slot-scope="scope">
              <el-input-number
                v-model.trim="scope.row.spareRatio"
                :precision="2"
                v-positive-int>
              </el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="mes_btn">
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// store模块名称
let storeModule = 'technicalConfirm'
export default {
  name: 'SpareRatio',
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {
    spareRatioListData() {
      return this.$store.state[storeModule].spareRatioListData.list || []
    }
  },
  methods: {
    openDialog(workorderId) {
      this.dialogVisible = true
      this.init(workorderId)
    },
    // 获取弹窗列表
    init(workorderId) {
      let commitObj = {
        method: 'post',
        url: 'a/workorderworkstagematerial/workorderWorkstageMaterial/list',
        data: {
          pageNo: 1,
          pageSize: 9999,
          query: {
            workorderId: `${workorderId}`
          },
          sort: {
            sort: 'asc'
          }
        },
        module: storeModule,
        state: 'spareRatioListData'
      }
      this.$store.dispatch('saveData', commitObj).then(() => {
      })
    },
    // 保存备份量系数
    handleSubmit() {
      if (!this.checkSpareRatio()) return false
      this.saveSpareRatio()
    },
    // 保存接口
    saveSpareRatio() {
      let commitObj = {
        method: 'post',
        url: 'a/workorderworkstagematerial/workorderWorkstageMaterial/saveBatch',
        data: {
          workorderWorkstageMaterialList: this.spareRatioListData
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', commitObj).then(() => {
        this.saveSuccess()
      })
    },
    saveSuccess() {
      this.$message.success({
        message: '保存成功',
        duration: 1500,
        center: true,
        onClose: () => {
          this.dialogVisible = false
          this.$emit('submitSuccess')
        }
      })
    },
    checkSpareRatio() {
      console.log(this.spareRatioListData)
      if (this.spareRatioListData.some(value => value.spareRatio === '')) {
        this.$message.error({
          message: '请先填写备份量系数',
          duration: 1500,
          center: true
        })
        return false
      }
      // if (this.spareRatioListData.some(value => !(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value.spareRatio)))) {
      // if (this.spareRatioListData.some(value => !(/^(([0-9]+)|([0-9]+\.[0-9]{1,2}))$/.test(value.spareRatio)))) {
      if (this.spareRatioListData.some(value => value.spareRatio < 0)) {
        this.$message.error({
          message: '备份量系数不能为负',
          duration: 1500,
          center: true
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="less">

  td.is-input .cell {
    padding: 0 !important;
    background-color: #f5f7fa;

    .el-input__inner {
      background-color: #ffffff !important;
      height: 100% !important;
      position: absolute;
      top: 0;
      left: 0;

      &.error_input {
        color: @mesTableInputEFC;
      }

      &:focus {
        border: @mesTableInputFBorder;
      }
    }
  }
  .spare_ratio {
    .el-input-number__decrease, .el-input-number__increase {
      display: none !important;
    }
  }

</style>
